<template>
	<view>
		<view class="box">
			<view class="orderTitle">
				<text>购买光伏组件是您加入蜜袋互助的基础，光伏组件的发电收益将用于支撑您的互助保障。</text>
			</view>
			<view class="orderCoupons">
				<view class="orderCouponWrapTitle" v-if="ownYn">
					<view class="orderConfirmTitle">
						<image src="../../static/image/ownName.png"></image>
					</view>
				
					<view class="orderConponRightBottom">
						<text>{{orderObj.ownerName}}</text>
						<text>{{orderObj.cardId}}</text>
					</view>
				</view>
				<view class="orderCouponWrapTitleNo" v-else>
					<view class="orderConfirmTitle">
						<image src="../../static/image/nosettingOwn.png"></image>
					</view>
					<view class="nosetingown">
						<text>请先设置产权人信息</text>
						<text @click="goSetting()">去设置</text>
					</view>
				</view>
			</view>
			<view>
				<view class="orderSn">
					<view class="orderSnwrap"><text>订单编号</text><text>{{orderObj.orderNo}}</text></view>
				</view>
				<view class="orderFirst advanceSale" v-for="(item,index) in orderList" :key="index">
					<view class="orderFirst_wrap">
						<view class="orderFirst_wrap_title">
							<view>
								<image class="orderFirst_image" :src="item.img"></image>
							</view>
							<view class="orderFirst_wrap_title_text">

								<view class="orderConfirmTitleText">
									<view class="orderFirstIcon">预售</view>{{item.productName}}
								</view>
								<view class="orderFirst_wrap_title_text_image">
									<view>
										<image src="../../static/image/orderIcon.png" mode=""></image>
									</view>
									<view>
										<text>不支持7天无理由退货</text>
									</view>
								</view>
								<view class="order_title_bottom">
									<view>x{{item.quantity}}</view>
									<view class="orderTopLeft">
										<view style="color:rgba(17,17,17,1);"><span style="font-size: 26rpx;">￥{{item.advancePrice|money}}</span></view>
										<view style="text-decoration:line-through;color:rgba(153,153,153,1);"><span style="font-size: 26rpx;">￥{{item.totalPrice|money}}</span></view>
									</view>
								</view>
							</view>
						</view>
						<view class="orderFirst_wrap_title advance_wrap">
							<view class="advance_wrapContent">
								<view class="advance_wrapContentTitle">
									支付尾款后拥有光伏组件所有权并获得互助保障
								</view>
								<view class="section">
									<view class="section-head">
										<text>￥{{item.totalDepositAmount|money}}</text>
										<text>￥{{item.totalFinalAmount|money}}</text>
									</view>
									<view class="sectionLine">
										<image src="../../static/image/process.png"></image>
									</view>
									<view class="section_flex">
										<view style="color: #333333;">支付定金</view>
										<view class="section_bottomFirst">
											<text style="color: #333333;">支付尾款</text>
											<view class="section_bottom">
												<view>
													<image src="../../static/image/sectionTime.png"></image>
												</view>
												
												<view class="sectionTime">
												<text>{{item.payStartTime|formatDate}}</text>-<text>{{item.payEndTime|formatDate}}</text></view>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>

						<view class="rule advanceRule">
							<view>
								<text>我已阅读并同意</text>
								<navigator :url="'/pages/protocol/agreement?id='+itemChild.id" v-for="(itemChild,index) in item.pactList">《{{itemChild.name}}》</navigator>
							</view>

							<view class="checkbox" @click="agree(item,index)">
								<image src="../../static/image/checkBoxSelect.png" mode="" v-if="item.isChecked"></image>
								<image src="../../static/image/checkBox.png" mode="" v-if="!item.isChecked"></image>
							</view>
						</view>
						<view class="orderMoney">
							<view>
								<text class="orderMoneyFir">共{{item.quantity}}块</text>
								<text class="orderMoneySec">定金：</text>
								<text class="orderMoneyLas"><text class="orderMoneyLasf">￥{{item.totalDepositAmount|money}}</text></text>
							</view>
						</view>

					</view>
			
					
					
				</view>
			</view>
			<!-- 保障详情人员 -->
			<view class="orderPersonDetails">
				<view class="orderPersonDetailsWrap">
					<view class="orderPersonDetailsText">
						<text class="couponText">我的保障详情人员</text>
					</view>
			
					<view class="orderPersonAlltype">
						<view class="orderPersonType" v-for="(personItem,index) in guaranteePerson" :key="index">
							<text>{{personItem|guartancePerson}}</text>
						</view>
					</view>
			
				</view>
			</view>
			<view class="orderCoupon moneyFix">
				<view class="orderCouponWrap">
					<view class="advanceFlex">
						<view>
							<text class="orderMoneySum">共{{orderObj.totalQuantity}}块</text>
							<text class="orderMoneySumJ">定金：</text>
							<text class="orderMoneySumK"><text class="orderMoneySumL">￥{{orderObj.totalDepositAmount|money}}</text></text>
						</view>
						<view class="advanceBottom">
							<text>如有券后价，所含优惠在尾款使用</text>
						</view>
					</view>

					<view class="orderSumBtn" @click="payment()">
						<text>支付定金</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mask" v-if="isShowMask">
			<view class="waive-pouple">
				<view class="pouple-box">

					<view class="popup-boxImage">
						<image src="../../static/image/maskTitle.png"></image>
					</view>

					<view class="popup-boxText">
						<text>请先设置产权人信息</text>
						<text>光伏组件产权人当前只能为实名认证本人， 产权人确认后不可修改</text>
					</view>

					<view class="pouple-bottomFlex">
						<view class="flexFir" @click="waiveCofirm">
							取消
						</view>
						<view class="flexSec" @click="againThink">
							去设置
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				orderId: '', //订单id
				isShowMask: false, //实名认证模态框
				orderObj: {}, //最外层订单数据
				orderList: [], //订单列表数据
				ownYn: '', //是否实名认证
				guaranteePerson: [], //保障人列表
			}
		},
		onShow() {
			this.getDetails()
		},
		onLoad(opt) {
			this.orderId = opt.orderId;
		},
		methods: {
			// 是否同意协议
			agree(item, idx) {
				item.isChecked = !item.isChecked;
				this.$set(this.orderList, idx, item); //$set可以触发更新视图
			},
			// 取消模态框
			waiveCofirm() {
				this.isShowMask = false
			},
			// 去实名认证
			goSetting(){
				this.isShowMask=false;
				uni.navigateTo({
					url: '/pages/confirmOrder/settingMessage'
				})
			},
			// 去设置
			againThink() {
				this.isShowMask=false;
				uni.navigateTo({
					url: '/pages/confirmOrder/settingMessage'
				})
			},
			// 获取订单详情
			getDetails() {
				api.joinHellp.noPayDetails(
					this.orderId
				).then(res => {
					if (res.code == 1) {
						this.orderObj = res.data;
						this.ownYn = res.data.cardId;
						let orderList = res.data.orderDetail;
						orderList.forEach(function(item, index) {
							item.isChecked = false;
						})
						this.orderList = orderList;
						var ary = res.data.relations;//返回的加入互助的人数
						if(ary){
							let newArrt = ary.filter(item => item === 2);//过滤掉子女
							let newArrs = [...new Set(ary)];//原数组去重处理
							let aryIdx = ary.map(o => o).indexOf(2);//获取第一个出现子女的位置
							newArrs[aryIdx] = newArrs[aryIdx] + "" + newArrt.length//重新赋值子女
							this.guaranteePerson = newArrs
						}
					}
				})
			},
			// 立即支付
			payment() {
				// 判断是否实名认证
				if (!this.ownYn) {
					this.isShowMask = true;
					return;
				}
				// 判断是否都选择协议
				let orderList = this.orderList;
				let paySuccess = orderList.every(function(item, index, array) {
					return item.isChecked == true;
				});
				if (!paySuccess) {
					uni.showToast({
						title: '请勾选协议',
						duration: 3000
					});
					return;
				}
				// 去支付
				this.$wftPay(this.orderId)
			}
		},
	}
</script>

<style>
	@import "../confirmOrder/confirmOrder.css";
	.orderPersonDetails{
		margin-bottom: 140rpx;
		margin-top: 20rpx;
	}
	/* 最外层div */
	.advanceSale {
		height: 750rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
	}

	.advance_wrap {
		height: 266rpx;
		background: rgba(244, 255, 233, 1);
		margin-bottom: 15rpx;
	}

	/* 预售图标 */
	.orderConfirmTitleText {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
	}

	.orderFirstIcon {
		width: 50rpx;
		height: 24rpx;
		background: rgba(244, 165, 0, 1);
		font-size: 18rpx;
		font-family: OPPOSans;
		font-weight: 500;
		font-style: italic;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin-right: 10rpx;
		display: inline-block;
	}

	/* 预售价格 */
	.orderTopLeft {
		display: flex;
		flex-direction: column;
	}



	/* 协议 */
	.advanceRule {
		margin-top: 0;
	}

	/* 每一单的总价 */
	.orderMoney {
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	/* 最底部价格 */
	.moneyFix {
		height: 120rpx;
	}

	.advanceFlex {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.advanceBottom text {
		width: 320rpx;
		font-size: 20rpx;
		color: #F4A500;
		border: 1px solid #F4A500;
		padding: 5rpx;
	}

	/* 蓝色的部分支付定金和支付尾款部分 */
	.advance_wrapContent {
		padding: 40rpx 60rpx;
	}

	.advance_wrapContentTitle {
		width: 550rpx;
		height: 50rpx;
		line-height: 48rpx;
		text-align: center;
		background: rgba(123, 187, 56, 1);
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-bottom: 30rpx;
	}

	.box {
		padding-bottom: calc(var(--window-bottom) + 20rpx);
	}
</style>
